<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="mvc" %>
<%@ include file="nav.jsp"%>
<%@ include file="logo.jsp"%>
<%@ include file="item.jsp"%>
<%@ include file="footer.jsp" %>
<rapid:override name="contentContainer">
<div class="container">
	<div class="row">
		<div class="col-xs-12 col-md-12 col-lg-12 min-height" style="margin-top:50px;">
			<a href="/pethub/catalog/01-best-sellers">
				<div class="float-left center">
					 <div class="shopinnerbox">
					 	<div class="imageBlock">
						    <img src="/pethub/images/best-seller-blue_0.png" style="width:220px;"/>
						    <div class="imageBlock__overlay">
						    </div>
						    <div class="imageBlock__circle">
	  							 </div>	
						</div>
					 	<div class="center"><h2>销量最好</h2></div>
					 </div>
				</div>
			</a>
			<a href="/pethub/catalog/02-cat-tastic">
				<div class="float-left center">
					 <div class="shopinnerbox">
					 	<div class="imageBlock">
						    <img src="/pethub/images/catastic-green.png" style="width:220px;"/>
						    <div class="imageBlock__overlay">
						    </div>
						    <div class="imageBlock__circle">
	  							 </div>	
						</div>
					 	<div class="center"><h2>猫最钟爱</h2></div>
					 </div>
				</div>
			</a>
			<a href="/pethub/catalog/03-classic">
				<div class="float-left center">
					 <div class="shopinnerbox">
					 	<div class="imageBlock">
						    <img src="/pethub/images/classic-blue_0.png" style="width:220px;"/>
						    <div class="imageBlock__overlay">
						    </div>
						    <div class="imageBlock__circle">
	  							 </div>	
						</div>
					 	<div class="center"><h2>经典类型</h2></div>
					 </div>
				</div>
			</a>
			<a href="/pethub/catalog/04-sassy-smart-assy">
				<div class="float-left center">
					 <div class="shopinnerbox">
					 	<div class="imageBlock">
						    <img src="/pethub/images/sale-green.png" style="width:220px;"/>
						    <div class="imageBlock__overlay">
						    </div>
						    <div class="imageBlock__circle">
	  							 </div>	
						</div>
					 	<div class="center"><h2>时尚类型</h2></div>
					 </div>
				</div>
			</a>
		</div>
	 </div>
 </div>

</rapid:override>

<%@ include file="base.jsp" %>
<script type="text/javascript">
 	
 	function getToElement(evt) {
        var node;
        if (evt.type == 'mouseout') {
            node = evt.relatedTarget;
        } else if (evt.type == 'mouseover') {
            node = evt.target;
        }

        if (!node) {
            return;
        }

        while (node.nodeType != 1) {
            node = node.parentNode;
        }
        return node;
    }

    HTMLElement.prototype.isChildOf = function (elem) {
        if (elem && elem.children) {
            for (var i = 0; i < elem.childElementCount; i++) {
                var child = elem.children[i];
                if (child == this) {
                    return true;
                } else if (child.childElementCount > 0) {
                    return this.isChildOf(child);
                }
            }
        }
        return false;
    }

    var block = document.getElementsByClassName("imageblock")[0];
    block.addEventListener('mouseout', function (evt) {

        var toElement = evt.toElement || getToElement(evt);
        if (toElement == this || toElement.isChildOf(this)) {
            console.log('Does NOT really move out');
        } else {
            console.log('Really moved out');
            if (this.classList.contains('isActive')) {
                this.classList.remove('isActive');
            }
        }

    }, false);

    block.addEventListener('click', function (evt) {
        if (!this.classList.contains('isActive')) {
            this.classList.add('isActive');
        }
    }, false)
    
 </script>